<template>
    <div class="zhubo">
        <div class="zhubo-top">
            <div class="left">{{name}}</div>
            <div class="right" v-if="name!='个性推荐'">更多</div>
        </div>
        <div class="zhubo-list">
            <div class="item" v-for="(item,index) in father " :key="index">
                <img :src="item.picUrl" alt="">
                <div class="text">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "zhuboCard",
        props:{
            name:{
                type:String
            },
            father:{
                type:Array
            }
        }
    }
</script>

<style scoped lang="less">
    .zhubo {
        .zhubo-top {
            display: flex;
            justify-content: space-between;
            padding-bottom: 15px;
            border-bottom: 3px solid skyblue;

            .left {
                font-size: 20px;
                font-weight: 700;
            }
        }

        .zhubo-list {
            margin-bottom: 20px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            .item {
                width: 168px;
                height: 199px;
                border: 1px solid;
                margin-top: 20px;
                img {
                    width: 100%;
                    height: 168px;
                }
            }
        }
    }
</style>